/*
 * @Descripttion: 档案
 * @version:
 * @Author: spring
 * @Date: 2022-04-17 16:39:09
 * @LastEditors: spring
 * @LastEditTime: 2022-04-18 20:18:40
 */
import { store } from "../../redux";
import { memo, useEffect, useState } from "react";
import { archiverType, inquiryType } from "../../types";
import { Wrap } from "../../components/middleScreenWrap/wrapCss";
import { ADD, DELETE, MODIFY } from "../../common/constant";
import ArchivesTop from "./components/archivesTop";
import ArchivesTable from "./components/table";
import MessageBox from "./components/messageBox";
interface keepType {
  ruleForm: archiverType;
  state: string;
  visible: boolean;
}
// 纯函数组件
export default memo(function formTable() {
  // 页面指标接口
  let model: archiverType = {
    address: "",
    birthday: "",
    department: "",
    education: 1,
    id: "",
    idCard: "",
    marriage: 0,
    name: "",
    number: "",
    phone: "",
    position: "",
    sex: "",
    undergo: [],
  };
  // 状态存储表格数据，类型：数组
  let [data, dataList] = useState<archiverType[]>(store.getState());
  // 单一编辑窗口的表格数据
  let [ListRow, setListRow] = useState(model);
  // 是否加载动画
  let [loading, loadingState] = useState(false);
  // 是否打开档案弹窗
  let [dialogVisible, setDialogVisible] = useState(false);
  useEffect(() => {
    console.log('Componentsdidmount')
  }, [])
  // 参数：是否重置和头部查询表单
  const inquiryClick = (e: { reset: boolean; dataQuery: inquiryType }) => {
    loadingState(true);
    let { keyword, education, department, position } = e.dataQuery;
    let obj: archiverType[] = [];
    if (e.reset) {
      obj = store.getState();
    } else {
      obj = store
        .getState()
        .filter(
          (item) =>
            (item.number.indexOf(keyword) !== -1 ||
              item.name.indexOf(keyword) !== -1 ||
              item.idCard.indexOf(keyword) !== -1 ||
              item.address.indexOf(keyword) !== -1) &&
            (education ? item.education === education : true) &&
            (department ? item.department === department : true) &&
            (position ? item.position === position : true)
        );
    }
    // 模拟请求初始化数据
    setTimeout(() => {
      dataList(obj);
      loadingState(false);
    }, 300);
  };
  // 收集窗口数据事件
  const keepData = (e: keepType) => {
    if (e.state === ADD) {
      store.dispatch({ type: ADD, data: e.ruleForm });
    } else {
      store.dispatch({ type: MODIFY, data: e.ruleForm });
    }
    dataList(store.getState());
    setListRow(model);
    setDialogVisible(e.visible);
  };
  return (
    <Wrap>
      <div className="wrap_box">
        {/* 头部组件新增事件，提供查询模型 */}
        <ArchivesTop
          addData={() => {
            setDialogVisible(true);
          }}
          inquiryData={inquiryClick}
        ></ArchivesTop>
        {/* 表格数据，加载，提供删除，修改 */}
        <ArchivesTable
          data={data}
          loading={loading}
          deleteTable={(tags: archiverType) => {
            store.dispatch({ type: DELETE, data: tags });
            dataList(store.getState());
          }}
          modifyTable={(e: { tags: archiverType }) => {
            setListRow(e.tags);
            // 此处加定时器会造成二次渲染，什么原因
            // setTimeout(()=>{
            //   setDialogVisible(true);
            // })
            setDialogVisible(true);
          }}
        ></ArchivesTable>
      </div>
      {/* 窗口展示，单一表格，退出，页面指标 */}
      {dialogVisible && <MessageBox
        visible={dialogVisible}
        ListRow={ListRow}
        handleCancel={(hand: boolean) => {
          setDialogVisible(hand);
          setListRow(model);
        }}
        keepData={keepData}
      ></MessageBox>}
    </Wrap>
  );
});
